<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<!-- header -->
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <div class="header">
        <form action="#">
            <div class="flex-search">
                <div class="search-box">
                    <input type="search" id="keyVal" placeholder="搜索用户、帖子、新闻、活动">
                    <button class="search-btn" type="button" tapmode onclick="toSearch('search_result')">搜索</button>
                </div>
                <a href="javascript:void(0);" tapmode onclick="comeBack()">取消</a>
            </div>
        </form>
    </div>
</div>
<!-- header end -->
<div class="header-h" style="padding-top: 1.5rem;"></div>
<div class="search-section">
    <div class="search-list" id="historyBox">
        <div class="search-title">
            <h6>历史搜索</h6>
            <a href="javascript:void(0);" tapmode onclick="deleteHistory()" class="btn-clear"></a>
        </div>
        <ul id="history">
            <!--<li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">公益广告大赛</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">大学生日常活动</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">圈主怎么做才能让自己的圈子更好圈主怎么做才能让自己的圈子更好</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">旅游胜地</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">国庆假期做什么</a></li>-->
        </ul>
    </div>
    <div class="search-list">
        <div class="search-title">
            <h6>热门搜索</h6>
        </div>
        <ul class="hot-search" id="hotSearch">
            <!--<li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">校园篮球比赛</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">比较好的活动</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">音乐</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">校园风采</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">怎么做才能让自己的圈子更好</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">学霸是如何放松的</a></li>
            <li><a href="javascript:void(0);" tapmode onclick="commonUrl('search_result')">如何打发时间</a></li>-->
        </ul>
    </div>
</div>


</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function () {

        setFixStatusBar(); //设置状态栏
        pop.loading()
        keybackListener()
        api.addEventListener({
            name: 'SearchHistory'
        }, function (ret, err) {
            console.log(111111111)
            getSearchHistory()
        });
        getSearchHistory()


        // intoPageInput()
        // focusInput()

    };

    function intoPageInput() {
        var UIInput = api.require('UIInput');
        UIInput.open({
            id: 1,

            styles: {
                bgColor: '#fff',
                size: 14,
                color: '#000',
                placeholder: {
                    color: '#ccc'
                }
            },
            autoFocus: false,
            maxRows: 4,
            placeholder: '这是一个输入框',
            keyboardType: 'number',
        }, function(ret) {

            if (ret.eventType == 'change') {
            } else {

            }
        });
    }

    function focusInput(){
        // 将相应的输入框获取焦点
        var softInput = api.require('softInputMgr');
        softInput.toggleKeyboard();
        document.getElementById("keyVal").focus()

    }

    //跳转搜索结果页面

    function toSearch(path) {
        var key = $('#keyVal').val();
        if (key == '') {
            pop.notice('请输入搜索内容');
            return;
        }
        var param = {"key": key};
        commonUrl(path, param)
    }

    //监听小键盘确认键
    $("#keyVal").on('keypress',function(e) {
        var keycode = e.keyCode;
        var key = $(this).val();
        if(keycode=='13') {
            e.preventDefault();
            //请求搜索接口
            if (key == '') {
                pop.notice('请输入搜索内容');
                return;
            }
            var path = '../index/search_result';
            var param = {"key": key};
            commonUrl(path, param)
        }
    });


    //获取搜索关键词记录展示，热门搜索
    function getSearchHistory() {
        var param = {
            token: $api.getStorage('token')
        }
        getAjax(Interface.search_history, param, function (res) {
            var history = res.data.history;
            var hot = res.data.hot;
            if (isDefine(history)) {
                var historyHtml = '';
                $('#historyBox').show();
                for (var i = 0; i < history.length; i++) {
                    var key = {"key": history[i].key};
                    historyHtml += '<li><a href="javascript:void(0);" tapmode onclick=\'commonUrl("search_result",' + jsonChange(key) + ')\'>' + history[i].key + '</a></li>';
                }
                $('#history').html(historyHtml);
                //获取首页信息
            } else {
                $('#historyBox').hide();
            }
            if (isDefine(hot)) {
                var hotHtml = '';
                for (var i = 0; i < hot.length; i++) {
                    var key = {"key": hot[i].key};
                    hotHtml += '<li><a href="javascript:void(0);" tapmode onclick=\'commonUrl("search_result",' + jsonChange(key) + ')\'>' + hot[i].key + '</a></li>';
                }
                $('#hotSearch').html(hotHtml);
                //获取首页信息
            } else {
                $('#hotSearch').html('<p style="width: 100%;" class="pt30 pb30 t-c c-999">暂无热门搜索</p>');
            }
            pop.close()
        }, function (error) {
            pop.notice(error.msg);
            pop.close()
        })
    }

    //删除历史搜索记录
    function deleteHistory() {
        var param = {
            token: $api.getStorage('token')
        }
        pop.loading();
        getAjax(Interface.del_search, param, function (res) {
            pop.notice('清除成功');
            setTimeout(function () {
                getSearchHistory()
            },1000)
            pop.close()
        }, function (error) {
            pop.notice(error.msg);
            pop.close()
        })
    }


    $(function () {
        $(".comment-kinds").on('click', 'li', function () {
            var _this = $(this);
            var _index = _this.index();
            _this.addClass('on').siblings('li').removeClass('on');
            $(".comment-area .area").eq(_index).show().siblings('.area').hide();
        })
    })


</script>
